<template>
    <div style="margin-top: 2%; margin-left: 5%; margin-right: 5%">
        <Modal v-model="showP" title="预览" width="60%">
            <mavon-editor v-model="pArt.content" style="height: 450px; z-index: 1"
                          :subfield="false"
                          :defaultOpen="'preview'"
                          :toolbarsFlag="false"
                          :editable="false"></mavon-editor>
            <span slot="footer">
                <Button type="primary" @click="showP = false" style="width: 20%"> 关 闭 </Button>
            </span>
        </Modal>
        <Modal
                v-model="warn"
                title="提示"
                @on-ok="dodel">
            <h2 style="text-align: center"> 你 确 定 要 删 除 吗 </h2>
        </Modal>
        <h2>文章管理</h2>
        <br/>
        <Button type="info" @click="getData">刷新</Button>
        <Divider type="vertical"/>
        <Button type="primary" @click="passAll">一键通过所有文章</Button>
        <br/>
        <br/>
        <div v-if="isMO">
            <Card>
                <span slot="title">待审核</span>
                <div>
                    <Row :gutter="20">
                        <Col :span="8">
                            标题
                        </Col>
                        <Col :span="8">
                            作者
                        </Col>
                        <Col :span="8">
                            执行
                        </Col>
                        <Divider/>
                    </Row>
                    <Row :gutter="20" v-for="i in unpass" :key="i.id">
                        <Col :span="8">
                            <Button type="text" @click="prev(i.id)">
                                <h2 style="color: dodgerblue">
                                    {{i.title}}
                                </h2>
                            </Button>
                        </Col>
                        <Col :span="8">
                            <h2>{{i.author}}</h2>
                        </Col>
                        <Col :span="8" style="padding-bottom: 5px">
                            <Button type="success" @click="dopass(i.id)">通过</Button>
                            <Divider type="vertical"/>
                            <Button type="error" @click="del(i.id)">删除</Button>
                        </Col>
                        <Divider/>
                    </Row>
                </div>
            </Card>
            <br/>
        </div>
        <Row :gutter="20">
            <Col :span="isMO?'24':'12'">
                <Card>
                    <span slot="title">已通过</span>
                    <div>
                        <Row :gutter="20">
                            <Col :span="8">
                                标题
                            </Col>
                            <Col :span="8">
                                作者
                            </Col>
                            <Col :span="8">
                                执行
                            </Col>
                            <Divider/>
                        </Row>
                        <Row :gutter="20" v-for="i in pass" :key="i.id">
                            <Col :span="8">
                                <h2>
                                    <a target="_blank" :href="'/article?id='+i.id">{{i.title}}</a>
                                </h2>
                            </Col>
                            <Col :span="8">
                                <h2>{{i.author}}</h2>
                            </Col>
                            <Col :span="8" style="padding-bottom: 5px">
                                <Button type="warning" @click="setTop(i.id, true)" v-if="i.top == false">置顶</Button>
                                <Button type="warning" @click="setTop(i.id, false)" v-if="i.top == true">取消置顶</Button>
                                <Divider type="vertical"></Divider>
                                <Button type="error" @click="del(i.id)">删除</Button>
                            </Col>
                            <Divider/>
                        </Row>
                    </div>
                </Card>
            </Col>
            <Col :span="12" v-if="!isMO">
                <Card>
                    <span slot="title">待审核</span>
                    <div>
                        <Row :gutter="20">
                            <Col :span="8">
                                标题
                            </Col>
                            <Col :span="8">
                                作者
                            </Col>
                            <Col :span="8">
                                执行
                            </Col>
                            <Divider/>
                        </Row>
                        <Row :gutter="20" v-for="i in unpass" :key="i.id">
                            <Col :span="8">
                                <Button type="text" @click="prev(i.id)">
                                    <h2 style="color: dodgerblue">
                                        {{i.title}}
                                    </h2>
                                </Button>
                            </Col>
                            <Col :span="8">
                                <h2>{{i.author}}</h2>
                            </Col>
                            <Col :span="8" style="padding-bottom: 5px">
                                <Button type="success" @click="dopass(i.id)">通过</Button>
                                <Divider type="vertical"/>
                                <Button type="error" @click="del(i.id)">删除</Button>
                            </Col>
                            <Divider/>
                        </Row>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    export default {
        name: "Arts",
        data() {
            return {
                isMO: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
                showP: false,
                pass: '',
                unpass: '',
                warn: false,
                did: '',
                pArt: '',
            }
        },
        created() {
            this.getData();
        },
        methods: {
            setTop(id, bool) {
                const t = this;
                axios.get('/setTop?id='+id+'&top='+bool).then(function (resp) {
                    t.getData();
                })
            },
            passAll() {
                this.$Modal.confirm({
                    title: ' 确 定 通 过 吗 ',
                    onOk: function () {
                        const t = this;
                        axios.get('/passAll').then(function (resp) {
                            location.reload();
                        });
                    },
                    onCancel: function () {
                        this.$Message.info('取消');
                    }
                })
            },
            prev(id) {
                const t = this;
                axios.get('/getArticleByID/' + id).then(function (resp) {
                    t.pArt = resp.data;
                })
                this.showP = true;
            },
            dopass(id) {
                const t = this;
                axios.get('/pass/' + id).then(function (resp) {
                    t.$Message.success('已通过');
                    t.getData();
                })
            },
            dodel() {
                const t = this;
                axios.delete('/delete/' + t.did).then(function (resp) {
                    t.$Message.info('已删除');
                    t.getData();
                })
            },
            del(id) {
                this.did = id;
                this.warn = true;
            },
            getData() {
                const t = this;
                axios.get('/getPassList?pass=true').then(function (resp) {
                    t.pass = resp.data;
                    // console.log(resp.data);
                })
                axios.get('/getPassList?pass=false').then(function (resp) {
                    t.unpass = resp.data;
                })
            }
        }
    }
</script>

<style scoped>

</style>